<template>
  <div class="main animated fadeInDown">
    <header></header>
    <main>
      <img :src="turnImg" alt="" id="outter">
      <img :src="turnBtn" alt="" @click.passive="getMyPrize()">
    </main>
    <nav>
      <p></p>
      <p @click.passive="showPrizelist()"></p>
      <p @click.passive="sharePanel()"></p>
      <p @click.passive="showMyprize()"></p>
    </nav>
    <ul class="ruler">
      <li class="title">{{ruler.title}}</li>
      <li>{{ruler.ruler1}}</li>
      <li>{{ruler.ruler2}}</li>
      <li>{{ruler.ruler3}}</li>
      <li>{{ruler.ruler4}}</li>
      <li>{{ruler.ruler5}}</li>
      <li>{{ruler.ruler6}}</li>
      <li>{{ruler.ruler7}}</li>
      <li>{{ruler.ruler8}}</li>
    </ul>
    <footer>
      <img :src="footerbar" alt="">
    </footer>
    <Follow :ff="follow" />
    <Prize :prize='prizet' />
    <Load :load='load' />
    <Prizelist :swiperbg="swiperbg" />
    <share :share='share' @changeshare="changeshare" />
  </div>
</template>
 <script>
import { rotate } from "@/assets/lib/rotate.js";
import {  getServerHost,
  preventMove,
  GetRequest} from "@/assets/lib/tool.js";
import { Swiper, Tab, TabItem, Panel } from "vux";
import Follow from '@/components/panel/Follow';
import Prize from '@/components/panel/Prize';
import Load from '@/components/panel/Load';
import Prizelist from '@/components/panel/Prizelist';
import Share from '@/components/panel/Share';
const prizeMap = [
  { type: '1', name: '1000元话费', info: 'type1' },
  { type: '2', name: '100元电子券', info: 'type2' },
  { type: '3', name: '50元电子券', info: 'type2' },
  { type: '3', name: '20元电子券', info: 'type2' },
  { type: '4', name: '10元电子券', info: 'type2' },
  { type: '5', name: '100M流量', info: 'type3' },
  { type: '6', name: '腾讯王卡', info: 'type4' },
  { type: '7', name: '', info: 'sharenotimes' }, //分先后没有次数
  { type: '8', name: '', info: 'notimes' },  //游戏次数已用完
]
export default {
  name: 'game',
  data() {
    return {
      follow: true,
      load: false,
      share: false,
      prizet: {
        show: false,
        data: prizeMap[4]
      },
      swiperbg: {
        show: false,
        prizelist: true,
        myprize: false
      },
      turnImg: require('@/assets/img/turn-img.png'),
      turnBtn: require('@/assets/img/btn.png'),
      footerbar: require('@/assets/img/footer-flow.png'),
      ruler: {
        title: '活动规则',
        ruler1: '1.本次转盘抽奖活动只针对关注并绑定山东联通微信公众号的用户，用户在每周一00：00获得一次抽奖机会，用户每周最多可通过分享助力获得2次额外抽奖机会；',
        ruler2: '2.奖品为流量、电子券、腾讯王卡、话费；',
        ruler3: '分享助力规则：',
        ruler4: '用户通过分享最多可获得2次额外抽奖机会；',
        ruler5: '奖品领取规则：',
        ruler6: '1.流量：需用户自行前往【联通手机营业厅APP-流量精选-微信专享】领取，已兑换的流量立即生效，仅限当月使用，次月不结转；',
        ruler7: '2.电子券： 3个工作日内到账，电子券可用于购物、生活缴费等，等同于现金使用；',
        ruler8: '3.腾讯王卡：王卡将在获奖后的10个工作日'
      }
    }
  },
  components: { Follow, Prize, Load, Prizelist, Share },
  mounted() {
    this.$nextTick(() => {
    })
  },
  methods: {
    getMyPrize() {
      var outter = document.getElementById('outter');
      rotate(outter, 7)
    },
    //分享助力
    sharePanel() {
      this.share = true;
    },
    //修改弹窗关闭
    changeshare(data) {
      this.share = data;
    },
    //中奖名单
    showPrizelist() {
      this.swiperbg = {
        show: true,
        prizelist: true,
        myprize: false
      }
    },
    // 我的奖品
    showMyprize() {
      this.swiperbg = {
        show: true,
        prizelist: false,
        myprize: true
      }
    }
  },
}
</script>
 
 <style lang="less" scoped>
body {
  font-size: 24px;
  overflow-x: hidden;
}
header {
  width: 100%;
  height: 418px;
  background: url("../../assets/img/title.png") no-repeat center center;
  background-size: 100% 100%;
}
.main {
  overflow-x: hidden;
}
main {
  position: relative;
  margin-top: -126px;
  width: 100%;

  text-align: center;
  img:nth-child(1) {
    margin: 0 auto;
    vertical-align: middle;
    width: 610px;
    height: 610px;
  }
  img:nth-child(2) {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    transform: translateY(-15px);
    width: 17.3125%;
  }
}
nav {
  margin-top: 40px;
  p:nth-child(1) {
    margin: 0 auto 40px;
    width: 574px;
    height: 157px;
    background: url("../../assets/img/sprite.png") no-repeat -6px -10px;
    background-size: 583px 590px;
  }
  p:nth-child(2) {
    margin: 0 auto 40px;
    width: 574px;
    height: 110px;
    background: url("../../assets/img/sprite.png") no-repeat -6px -200px;
    background-size: 583px 590px;
  }
  p:nth-child(3) {
    margin: 0 auto 40px;
    width: 574px;
    height: 110px;
    background: url("../../assets/img/sprite.png") no-repeat -6px -343px;
    background-size: 583px 590px;
  }
  p:nth-child(4) {
    margin: 0 auto 40px;
    width: 574px;
    height: 110px;
    background: url("../../assets/img/sprite.png") no-repeat -6px -487px;
    background-size: 583px 590px;
  }
}
.ruler {
  width: 572px;
  margin: 0 auto;
  background: #d95550;
  border-radius: 15px;
  padding: 0 40px;
  .title {
    text-align: center;
    font-size: 36px;
    color: #f8c30b;
    padding: 27px 0;
    font-weight: bold;
  }
  li {
    text-align: left;
    font-size: 24px;
    color: #fff;
    line-height: 1.5em;
  }
}
footer {
  width: 100%;
  img {
    width: 100%;
    vertical-align: text-bottom;
  }
}
</style>
